<template>
  <div class="app-container fix-navbar-overlay">
    <NavBar>
      <template #right>
        <img
          @click="handleCameraIconClick"
          src="/images/icon/camera.svg"
          alt=""
        />
      </template>
    </NavBar>
    <CellGroup>
      <Cell>
        <template #left>
          <img class="avator" :src="avator.img" alt="" />
        </template>
        <div class="default">
          <span>{{ avator.name }}</span>
          <span>微信号: {{ avator.name }}</span>
        </div>

        <template #right>
          <div class="right-slot">
            <img src="/images/icon/qr-code.svg" alt="" />
            <img src="/images/icon/link-bold.svg" alt="" />
          </div>
        </template>
      </Cell>
    </CellGroup>

    <CellGroup>
      <Cell>
        <template #left>
          <img
            style="width: 25px"
            src="/images/icon/pay.svg"
            alt=""
          />
        </template>
        支付
        <template #right>
          <img src="/images/icon/link.svg" alt="" />
        </template>
      </Cell>
    </CellGroup>

    <CellGroup>
      <Cell v-for="(i, index) in mine" :key="index">
        <template #left>
          <img style="width: 25px" :src="i.img1" alt="" />
        </template>
        {{ i.name }}
        <template #right>
          <img :src="i.img2" alt="" />
        </template>
      </Cell>
    </CellGroup>

    <CellGroup>
      <Cell to="/mine/setting">
        <template #left>
          <img
            style="width: 25px"
            src="/images/icon/setting.svg"
            alt=""
          />
        </template>
        设置
        <template #right>
          <img src="/images/icon/link.svg" alt="" />
        </template>
      </Cell>
    </CellGroup>
  </div>
</template>

<script>
import NavBar from "src/components/NavBar.vue"
export default {
  components: {
    NavBar,
  },
  methods: {
    handleCameraIconClick() {
      console.log("camera icon click")
    },
  },
  data: function () {
    return {
      avator: {
        img: "/images/mock/avator.png",
        name: "一枝梨花",
      },
      mine: [
        {
          img1: "/images/icon/collect.svg",
          name: "收藏",
          img2: "/images/icon/link.svg",
        },
        {
          img1: "/images/icon/album.svg",
          name: "相册",
          img2: "/images/icon/link.svg",
        },
        {
          img1: "/images/icon/cardbag.svg",
          name: "卡包",
          img2: "/images/icon/link.svg",
        },
        {
          img1: "/images/icon/emoji.svg",
          name: "表情",
          img2: "/images/icon/link.svg",
        },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
.avator {
  width: 58px;
  height: 58px;
  border-radius: 5px;
  margin: 10px;
}

.default {
  display: flex;
  flex-direction: column;
  height: 100px;

  & > span:first-child {
    margin-top: 14px;
    font-weight: 700;
    font-size: 18px;
  }

  & > span:last-child {
    font-size: 13px;
    color: $font-color;
    margin-top: 2px;
  }
}

.right-slot {
  & > img:first-child {
    width: 18px;
    height: 18px;
    position: relative;
    top: 5px;
    right: 20px;
  }
}
.left-box img {
  margin-top: 6px;
}
</style>
